<template>
	<div class="force_amend_wrapper">
		<div class="form">
			<h4>是否强制修改</h4>
			<el-switch v-model="isTimingForce" active-value="1" inactive-value="2" @change="handleSaveForceConfig"></el-switch>
		</div>
		<div class="tips">开启之后，输入几次错误后会进行登录锁定</div>
		<div class="set" v-if="isTimingForce === '1'">
			<span>强制修改周期</span>
			<sw-number-input v-model="timingForceLen" size="mini"></sw-number-input>
			<font>天</font>
			<el-button size="mini" type="primary" @click="handleSaveForceConfig">保存</el-button>
		</div>
		<div class="sw_button_box">
			<el-button class="btn" size="small" type="primary" @click="handleAllForceAmend('2')">全部关闭强制</el-button>
			<el-button class="btn" size="small" type="primary" @click="handleAllForceAmend('1')">全部开启强制</el-button>
			<el-input size="small" placeholder="请输入用户昵称" clearable v-model="queryData.userName">
				<el-button slot="append" icon="el-icon-search" @click="queryUserListData"></el-button>
			</el-input>
		</div>
		<div class="sw_table_container" v-loading="loading">
			<el-table size="medium" :data="userListData" stripe height="100%">
				<el-table-column prop="userName" label="用户名称"></el-table-column>
				<el-table-column prop="deptName" label="所属部门"></el-table-column>
				<el-table-column label="是否强制">
					<template slot-scope="{ row }">
						<el-tag size="small" v-if="row.isForce === '1'" type="success">是</el-tag>
						<el-tag size="small" v-if="row.isForce === '2'" type="danger">否</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="90">
					<template slot-scope="{ row }">
						<el-button size="medium" type="text" @click="handleForceOperate(row)">{{ row.isForce === '1' ? '关闭强制' : '开启强制' }}</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryUserListData"></sw-pagination>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { updateTimingSetting } from '@/api/platform/tbSysSite';
import { getUserList, forceUpdateAllUserPassword, forceUpdateUserPassword } from '@/api/system/tbSysUser';
export default {
	data() {
		return {
			loading: false,
			isTimingForce: '1',
			timingForceLen: '30',
			queryData: { page: 1, limit: 15 },
			dataCount: 0,
			userListData: []
		};
	},
	computed: {
		...mapGetters(['siteInfo'])
	},
	mounted() {
		this.isTimingForce = this.siteInfo.isTimingForce;
		this.timingForceLen = this.siteInfo.timingForceLen;
		this.queryUserListData();
	},
	methods: {
		async handleSaveForceConfig() {
			let params = { id: this.siteInfo.id, isTimingForce: this.isTimingForce, timingForceLen: this.timingForceLen };
			let result = await updateTimingSetting(params).then((res) => res.data);
			if (result.code === 0) {
				this.$message.success('保存设置成功');
				this.$store.dispatch('getSiteBaseInfo');
			} else {
				this.$message.error('保存设置失败');
			}
		},

		//获取用户列表
		async getUserListData() {
			let result = await getUserList(this.queryData).then((res) => res.data);
			this.loading = false;
			if (result.code === 0) {
				this.dataCount = parseInt(result.count);
				this.userListData = !result.data ? [] : result.data;
			}
		},

		//查询用户列表
		queryUserListData() {
			this.loading = true;
			this.getUserListData();
		},

		//开启/关闭强制修改
		async handleForceOperate(row) {
			let isForce = row.isForce === '1';
			let params = { id: row.id, isForce: isForce ? '2' : '1' };
			let result = await forceUpdateUserPassword(params).then((res) => res.data);
			if (result.code === 0) {
				this.$message.success(`${isForce ? '关闭' : '开启'}强制修改成功`);
				row.isForce = isForce ? '2' : '1';
			} else {
				this.$message.error(`${isForce ? '关闭' : '开启'}强制修改失败`);
			}
		},

		//全部开启/关闭强制修改
		async handleAllForceAmend(value) {
			let isForce = value === '1';
			let result = await forceUpdateAllUserPassword(value).then((res) => res.data);
			if (result.code === 0) {
				this.$message.success(`全部用户${isForce ? '关闭' : '开启'}强制修改成功`);
				this.queryUserListData();
			} else {
				this.$message.error(`全部用户${isForce ? '关闭' : '开启'}强制修改失败`);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.force_amend_wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px;
	overflow: hidden;
	.form {
		display: flex;
		align-items: center;
		h4 {
			margin-right: 10px;
			line-height: 1;
		}
	}
	.tips {
		font-size: 14px;
		line-height: 1;
		color: #909399;
		margin-top: 10px;
	}
	.set {
		display: flex;
		align-items: center;
		margin-top: 12px;
		span {
			margin-right: 10px;
		}
		font {
			margin-left: 10px;
		}
		.el-input__inner {
			padding: 0 10px;
		}
		.el-input {
			width: 60px;
			font-size: 14px;
			text-align: center;
		}
		.el-button {
			margin-left: 10px;
		}
	}
	.sw_button_box::v-deep {
		margin: 16px 0;
		padding-top: 16px;
		border-top: solid 1px #ebeef5;
		.el-button.btn {
			float: right;
			margin-left: 10px;
		}
		.el-input {
			width: 240px;
		}
		.el-input-group__append {
			padding: 0 12px;
		}
	}
}
</style>
